Thank you for downloading Freebix - free, fully responsive HTML site template.

A) General

SOME GENERAL INFORMATIONS

This template is HTML/CSS Responsive Template. It is compatible with all modern Browsers, Smartphones and Tablet's. It is based on 960 grid and elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait)

File List

Freebix folder contains:

• → HTML folder
• → Help folder
• → License

B) HTML Structure

Index Page HTML Structure

• › Header - Logo & Menu Part
• › Home Content Part - Slider
• › Home Content Part - Info Box
• › Home Content Part - Lates Photos Box
• › Home Content Part - faq and Latest Entries
• › Home Content Part - Footer
• › Home Content Part - Copyright

All content is within div named container /*div class="container"/*. With this your layout stayed centered on site.

Navigation Structure

Template contains "Main Menu" and "Responsive Menu" - for mobile and tablet's

prettyPhoto (lightbox) Help

This part is responsible for prettyPhoto :

Here is one example, open blog.html file and find this lines:

Inside href you need to put link to your bigger image that u want to show inside lightbox.

How to change a logo!? Here you can find codes for it

You just need to save your logo as a .png file in your images folder and to put it inside img src="images/logo.png" part of the code.

C) CSS Structure

CSS File List

CSS Folder contains 4 CSS files:

• → base.css - base template styles
• → prettyPhoto.css
• → screen.css - main template styles and media queries
• → skeleton.css - 960 grid system

Please note

The styles mentioned above are essential files, don`t remove them from your html files:

In screen.css all codes are well sorted for each part of the html structure. All you need to do in order to customize your website is to find corresponding id or class in the markup and to find its style in CSS file. For example:

HTML:

CSS:

If you need some help with css part or if you don`t know how to use and change it you can visit w3School: http://www.w3schools.com where you will find great tutorials and examples for CSS and also for the HTML, JAVA, PHP...

D) JS Structure

JS File List

• › jquery-1.8.0.min.js - this is crucial file, don't delete it.
• › screen.js - main file for including js scripts
• › tabs.js - tabs
• › jquery.prettyPhoto.js - prettyPhoto for images
• › jquery.flexslider-min.js - responsive slider
• › superfish.js - jquery menu
• › hoverIntent.js

Js scripts are placed at the very bottom of the page in order to allow a browser first to load content and afterwards – javascript elements.

Like this :

E) PHP Structure

PHP Files

"process.php" file is important for the Contact Page / contact form

inside $toemail = 'test@youremail.com' you need to put your email adress so that people can contact you

Contact form is activated inside of the screen.js file as:

F) Credits

Credits to Different Script Files

• jQuery:http://jquery.com/
• PrettyPhoto: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
• Google Fonts: http://www.google.com/webfonts#ChoosePlace:select
• Superfish Menu: http://users.tpg.com.au/j_birch/plugins/superfish/
• Flexslider: http://www.woothemes.com/flexslider/

Credits for different Assets - images

Photos used for live preview are from markjsebastian. They aren't included inside of the download file.